<template>
	<view  :class="searchVisible ? 'prevent' : ''">
		<view class="device-container">
			<device-filter @getDeviceList="getDeviceList" @getSearchList="getSearchList">
				<template slot="popup">
					<view class="search-device-box" v-for="item in searchList">
						<view class="search-device" hover-class="clickable" @click="selectDevice(item)">
							<!-- <view class="device-img">
								<image :src="item.img"  @error="item.img = ''" mode="" v-if="item.img"></image>
								<view class="" v-else>无</view>
							</view> -->
							<view class="device-des">
								<view class="device-des-top">{{item.name}}</view>
								<view class="device-des-bottom">{{item.aname}}</view>
							</view>
						</view>
					</view>
				</template>
				<template slot="right">
					<view class="device-box-right-item" v-for="item in deviceList">
						<view class="device-box-right-item-hover" hover-class="clickable" @click="selectDevice(item)">
							<view class="device-radio">
								<custom-radio :checked="item.checked"></custom-radio>
							</view>
							<!-- <view class="device-img">
								<image :src="item.img"  @error="item.img = ''" mode="" v-if="item.img"></image>
								<view class="" v-else></view>
							</view> -->
							<view class="device-des">
								<view class="device-des-top">{{item.name}}</view>
								<view class="device-des-bottom">{{item.aname}}</view>
							</view>
						</view>
					</view>
				</template>
			</device-filter>
		</view>
		<select-nav :list="selectList" @confirm="confirmSelect">
			<template slot="center">
				<view class="select-device" v-for="v in selectList">
					{{v.aname}}
				</view>
			</template>
			<template slot="popup">
				<view class="select-popup-item" v-for="item in selectList">
					<!-- <view class="device-img">
						<image :src="item.img"  @error="item.img = ''" mode="" v-if="item.img"></image>
						<view class="" v-else>无</view>
					</view> -->
					<view class="device-des">
						<view class="device-des-top">{{item.name}}</view>
						<view class="device-des-bottom">{{item.aname}}</view>
					</view>
					<view class="delete-btn" @click="deleteSelectItem(item)">
						<u-button type="primary" text="移除" :customStyle="{height: '60rpx'}" color="#b1b9c7"></u-button>
					</view>
				</view>
			</template>
		</select-nav>
	</view>
</template>

<script>
	import _custom from '../../../common/_custom'
	import DeviceFilter from '@/components/custom/device-filter/device-filter.vue'
	import CustomRadio from '@/components/custom/radio/radio.vue'
	import SelectNav from '../../../components/custom/select-nav/select-nav.vue'
	
	export default {
		components: {
			DeviceFilter,CustomRadio,SelectNav
		},
		data() {
			return {
				data: {},
				searchVisible: false,
				deviceList: [],
				searchList: [],
				selectList: []
			}
		},
		onLoad(option) {
			this.data = JSON.parse(option.data);
			this.selectList = this.data.list
		},
		methods: {
			getDeviceList(v) {
				v.forEach(item1 => {
					this.selectList.forEach((item2,index) => {
						if(item1.aname == item2.aname) {
							item1.checked = true;
						}
					})
				})
				this.deviceList = v
				console.log(this.deviceList)
			},
			getSearchList(v) {
				this.searchList = v
			},
			selectDevice(v) {
				v.checked = !v.checked
				if(v.checked) {
					this.selectList.push(v)
				} else {
					this.selectList.forEach((item,index) => {
						if(item.aname == v.aname) {
							this.selectList.splice(index,1)
						}
					})
				}
			},
			deleteSelectItem(v) {
				this.selectList.forEach((item,index) => {
					if(item.aname == v.aname) {
						this.selectList.splice(index,1)
					}
				})
				v.checked = false
			},
			confirmSelect() {
				if(this.data.type == 0) {
					uni.$emit('select-fix-device',this.selectList)
				} else if(this.data.type == 1) {
					uni.$emit('select-keep-device',this.selectList)
				}
				uni.navigateBack({})
			}
		}
	}
</script>

<style>
	.device-container {
		height: calc(100vh - 200rpx);
	}
	
	.search-device-box {
		background-color: #fff;
		border-bottom: 1rpx solid #eee;
	}
	
	.search-device {
		padding: 20rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
	}
	
	.device-box-right-item {
		background-color: #fff;
		margin-bottom: 20rpx;
	}
	
	.device-box-right-item-hover {
		height: 100rpx;
		font-size: 30rpx;
		padding: 20rpx 0;
		display: flex;
		align-items: center;
	}
	
	.device-radio {
		width: 60rpx;
	}
	
	.device-img {
		width: 100rpx;
		height: 100rpx;
		margin-right: 10rpx;
	}
	
	.device-img > image {
		width: 100%;
		height: 100%;
	}
	
	.device-img > view {
		width: 100%;
		height: 100%;
		background-color: #eee;
		font-size: 25rpx;
		text-align: center;
		line-height: 100rpx;
	}
	
	.device-des-top {
		font-size: 25rpx;
		line-height: 40rpx;
	}
	
	.device-des-bottom {
		font-size: 25rpx;
		line-height: 40rpx;
	}
	
	.select-device {
		margin-right: 20rpx;
		padding: 5rpx 10rpx;
		background-color: #3C9CFF;
		border-radius: 5rpx;
		font-size: 25rpx;
		color: #fff;
	}
	
	.select-popup-item {
		height: 100rpx;
		display: flex;
		align-items: center;
		padding: 20rpx;
		border-bottom: 1rpx solid #eee;
		position: relative;
	}
	
	.delete-btn {
		position: absolute;
		right: 20rpx;
		top: 40rpx;
		width: 80rpx;
		height: 30rpx;
	}
</style>
